<div id="menus">
	<el-col :sm="4">
		<node-tree ref="menuTree"
			header="menu-tree"
			:data="menuList"
			:allowDrag="allowDrag"
			:allowDrop="allowDrop"
			:isDraggable="envMode !== 'production'"
			:showAppend="showAppend"
			:showRemove="showRemove"
			:showButton="envMode !== 'production'"
			@handle-edit="editMenu"
			@handle-append="appendMenu"
			@handle-remove="removeMenu"
			@handle-append-main="appendMainMenu">
		</node-tree>
	</el-col>
	<el-col :sm="20">
		<el-card class="menu-node" header="菜单节点信息">
			<el-form ref="menuForm" :model="mainNode" :rules="rules" label-position="right" label-suffix=":" label-width="110px">
				<el-row class="form-row">
					<el-col :sm="7">
						<el-form-item label="编号" prop="id">
							<el-input v-model="mainNode.id" clearable disabled size="medium"></el-input>
						</el-form-item>
					</el-col>
					<el-col :sm="7">
						<el-form-item label="名称" prop="name">
							<el-input v-model="mainNode.name" :disabled="disabledNodeName(mainNode)" clearable size="medium"
								@blur="createPath(mainNode)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :sm="7">
						<el-form-item label="中文标题" prop="title">
							<el-input v-model="mainNode.title" clearable size="medium"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-row">
					<el-col :sm="7">
						<el-form-item label="图标" prop="icon">
							<e-icon-picker v-model="mainNode.icon" :disabled="disabledCommon(mainNode)" :options="options" :width="500"
								@click.native="loadIcons()"></e-icon-picker>
						</el-form-item>
					</el-col>
					<el-col :sm="7">
						<el-form-item label="分组" prop="group">
							<el-select v-model="mainNode.group" @change="setGroup(mainNode)" placeholder="请选择" style="width: 100%; height:
								100%">
								<template v-for="item in constants.select.menuGroupOptions">
									<el-option :label="item.label" :value="item.value"></el-option>
								</template>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :sm="7">
						<el-form-item label="英文标题" prop="titleEn">
							<el-input v-model="mainNode.titleEn" clearable size="medium"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-row">
					<el-col :sm="7">
						<el-form-item label="权限" prop="permission">
							<el-select v-model="mainNode.permission" :disabled="disabledPermission(mainNode)" placeholder="请选择" style="width: 100%; height:
								100%">
								<template v-for="item in constants.select.permissionOptions">
									<el-option :label="item.label" :value="item.value"></el-option>
								</template>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :sm="7">
						<el-form-item label="子菜单" prop="hasChildren">
							<el-select v-model="mainNode.hasChildren" :disabled="disabledHasChildren(mainNode)" placeholder="请选择" style="width: 100%; height:
								100%"
								@change="setPath(mainNode)">
								<el-option :disabled="Number(mainNode.level) === 3" :value="true" label="是"></el-option>
								<el-option :disabled="Number(mainNode.level) === 1" :value="false" label="否"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col v-show="!mainNode.hasChildren" :sm="7">
						<el-form-item label="路径" prop="path">
							<el-input v-model="mainNode.path" :disabled="disabledNodeName(mainNode)" clearable size="medium"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="form-row">
					<el-col :pull="1">
						<el-button class="form-button" type="primary" @click="showChildrenMenus()" v-show="showChildrenButton">显示子菜单</el-button>
						<el-button class="form-button" type="primary" @click="saveMenu()">保存</el-button>
						<el-button class="form-button" type="primary" @click="downloadMenu()" v-show="envMode !== 'production'">下载</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</el-col>
	<div id="menu-table">
		<el-dialog :destroy-on-close="true" :visible.sync="showChildren" :width="envMode !== 'production' ? '90%' : '80%'" center lock-scroll top="5vh">
			<div slot="title" class="dialog-title">
				<div class="dialog-title">子节点信息表</div>
			</div>
			<el-table ref="menusTable" :cell-style="{padding : 0}" :data="tableData" :header-cell-style="{background:'rgba(223,234,231,0.94)',color:'#333838'}"
				height="calc(55.2vh)" :highlight-current-row="true" :indent="0" :load="loadTable" :row-style="{height: '42px'}" border lazy row-key="id" stripe
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}" @expand-change="expandChange">
				<el-table-column align="center" label="序号" type="index" width="55px"></el-table-column>
				<el-table-column align="center" class-name="id-class" label="编号" prop="id" width="85px"></el-table-column>
				<el-table-column align="center" label="名称" prop="name" width="205px">
					<template v-slot="scope">
						<el-input v-model="scope.row.name" :disabled="disabledNodeName(scope.row)" clearable size="medium" style="width: 100%;"
							@blur="createPath(scope.row)"></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" label="中文标题" prop="title" width="140px">
					<template v-slot="scope">
						<el-input v-model="scope.row.title" clearable size="medium" style="width: 100%;"></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" label="英文标题" prop="titleEn" width="210px">
					<template v-slot="scope">
						<el-input v-model="scope.row.titleEn" clearable size="medium" style="width: 100%;"></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" label="图标" prop="icon" width="250px">
					<template v-slot="scope">
						<e-icon-picker v-model="scope.row.icon" :disabled="disabledCommon(scope.row)" :options="options"
							style="width: 100%;" @click.native="loadIcons()"></e-icon-picker>
					</template>
				</el-table-column>
				<el-table-column align="center" label="分组" prop="group" width="140px">
					<template v-slot="scope">
						<el-select v-model="scope.row.group" @change="setGroup(scope.row)" placeholder="请选择" style="width: 100%">
							<template v-for="item in constants.select.menuGroupOptions">
								<el-option :label="item.label" :value="item.value"></el-option>
							</template>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column align="center" label="权限" prop="permission" width="80px">
					<template v-slot="scope">
						<el-select v-model="scope.row.permission" :disabled="disabledPermission(scope.row)" placeholder="请选择" style="width: 100%">
							<template v-for="item in constants.select.permissionOptions">
								<el-option :label="item.label" :value="item.value"></el-option>
							</template>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column align="center" label="子菜单" prop="hasChildren" width="80px">
					<template v-slot="scope">
						<el-select v-model="scope.row.hasChildren" :disabled="disabledHasChildren(scope.row)" placeholder="请选择" style="width: 100%"
							@change="setPath(scope.row)">
							<el-option :disabled="Number(scope.row.level) === 3" :value="true" label="是"></el-option>
							<el-option :disabled="Number(scope.row.level) === 1" :value="false" label="否"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column align="center" label="路径" prop="path">
					<template v-slot="scope">
						<template v-show="!scope.row.hasChildren">
							<el-input v-model="scope.row.path" :disabled="disabledNodeName(scope.row)" clearable size="medium" style="width: 100%;"></el-input>
						</template>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="135px" v-if="envMode !== 'production'">
					<template v-slot="scope">
						<el-dropdown v-show="!disabledCommon(scope.row)">
							<span class="el-dropdown-link sort-dropdown">排序<e-icon icon-name="el-icon-arrow-down el-icon--right"></e-icon></span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-show="showSortUp(scope.row)" class="sort-button" icon="el-icon-top"
									@click.native="sortRow(scope.row, true)"></el-dropdown-item>
								<el-dropdown-item v-show="showSortDown(scope.row)" class="sort-button" icon="el-icon-bottom"
									@click.native="sortRow(scope.row, false)"></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dropdown v-show="!disabledCommon(scope.row)">
							<span class="el-dropdown-link edit-dropdown">编辑<e-icon icon-name="el-icon-arrow-down el-icon--right"></e-icon></span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item class="edit-button" @click.native="appendRow(scope.row)" icon="el-icon-plus"></el-dropdown-item>
								<el-dropdown-item class="edit-button" @click.native="removeRow(scope.row)" icon="el-icon-minus"></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" center class="dialog-footer">
				<el-button type="primary" @click="handleSubmit()">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</div>
